import React, { PureComponent } from "react";
import { connect } from "dva";
import router from 'umi/router';
import { Card, Table, Icon,Button,message } from "antd";
import styles from "./component.less";

@connect()
export default class VideoAction extends PureComponent {
  constructor(props) {
    super(props);

  }

  componentDidMount() {
    //this.playVideo();
    //this.setFour();
  }
  setOne=()=>{
    console.log("setOne");
    this.setScreen(1);
  }
  setFour=()=>{
    console.log("setFour");
    this.setScreen(4);
  }
  setNine=()=>{
    console.log("setNine");
    this.setScreen(9);
  }
  playVideo=()=>{
    console.log("playVideo");
    var iframe = document.getElementById("videoIframe").contentWindow;
    console.log("iframe play video");
    const result = iframe.Play();
    if(!result){
      message.error("播放失败!");
    }
  }
  setScreen=(num)=>{
    var iframe = document.getElementById("videoIframe").contentWindow;
    iframe.SetScreenNum(num);
  }
  capPic=()=>{
    var iframe = document.getElementById("videoIframe").contentWindow;
    var index = iframe.GetSelPlayIndex();
    if(!index){
      index = 0;
    }
    const now = new Date();
    const timeNum = now.getTime();
    const path = "C:/videoPhoto/" + timeNum+".jpg";
    const result = iframe.CapPic(index, path);
    if(result){
      message.success("截图成功，保存路径为：" + path);
    } else {
      message.error("保存失败!");
    }
  }

  render() {
    //const {warnMonitor,loading } = this.props;
    const onePaintSvg = ()=>(
      <svg className="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M832 192 128 192l0 576 704 0L832 192zM768 704 192 704 192 256l576 0L768 704zM0 64l0 832 960 0L960 64 0 64zM896 832 64 832 64 128l832 0L896 832z" /></svg>
    );
    const fourPaintSvg = ()=>(
      <svg className="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64 448 64 0 64l0 384 0 64 0 384 960 0L960 64 512 64zM64 128l384 0 0 320L64 448 64 128zM64 832 64 512l384 0 0 320L64 832zM896 832 512 832 512 512l384 0L896 832zM896 448 512 448 512 128l384 0L896 448z" /></svg>
    );
    const ninePaintSvg = ()=>(
      <svg className="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M640 64 576 64 320 64 256 64 0 64l0 256 0 64 0 192 0 64 0 256 576 0 64 0 320 0L960 64 640 64zM576 128l0 192L320 320 320 128 576 128zM576 384l0 192L320 576 320 384 576 384zM64 128l192 0 0 192L64 320 64 128zM64 384l192 0 0 192L64 576 64 384zM64 832l0-192 192 0 0 192L64 832zM320 832l0-192 256 0 0 192L320 832zM896 832l-256 0 0-192 256 0L896 832zM896 576l-256 0L640 384l256 0L896 576zM896 320l-256 0L640 128l256 0L896 320z" /></svg>
    );
    const cameraPaintSvg = ()=>(
      <svg className="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M897.138688 264.650752 109.338624 264.650752c-41.85088 0-75.776 33.92512-75.776 75.776l0 491.52c0 41.85088 33.92512 75.776 75.776 75.776l787.800064 0c41.85088 0 75.776-33.92512 75.776-75.776l0-491.52C972.914688 298.575872 938.98752 264.650752 897.138688 264.650752zM503.236608 812.832768c-125.17376 0-226.646016-101.474304-226.646016-226.646016 0-125.17376 101.472256-226.646016 226.646016-226.646016 125.175808 0 226.646016 101.472256 226.646016 226.646016C729.884672 711.358464 628.412416 812.832768 503.236608 812.832768z"  /><path d="M503.238656 586.186752m-157.507584 0a76.908 76.908 0 1 0 315.015168 0 76.908 76.908 0 1 0-315.015168 0Z"  /><path d="M633.673728 196.614144c-4.907008-10.139648-18.13504-18.434048-29.39904-18.434048l-202.072064 0c-11.264 0-24.49408 8.296448-29.39904 18.434048L329.201664 286.72c-4.907008 10.139648 0.29696 18.434048 11.56096 18.434048l324.952064 0c11.264 0 16.46592-8.296448 11.56096-18.434048L633.673728 196.614144zM585.158656 222.554112c0 2.627584-9.216 4.777984-20.48 4.777984l-122.88 0c-11.264 0-20.48-2.1504-20.48-4.777984 0-2.629632 9.216-4.777984 20.48-4.777984l122.88 0C575.942656 217.77408 585.158656 219.92448 585.158656 222.554112z"  /></svg>
    );
    const OnePaintIcon = props => (
      <Icon component={onePaintSvg} style={{ paddingTop:"8px",marginRight:"30px",paddingLeft:"30px" }} {...props} />
    );
    const FourPaintIcon = props => (
      <Icon component={fourPaintSvg} style={{ paddingTop:"8px",marginRight:"30px" }} {...props} />
    );
    const NinePaintIcon = props => (
      <Icon component={ninePaintSvg} style={{ paddingTop:"8px",marginRight:"30px" }} {...props} />
    );
    const CameraPaintIcon = props => (
      <Icon component={cameraPaintSvg} style={{ paddingTop:"8px"}} {...props} />
    );
    // const columns = [{
    //   dataIndex: 'warnCode',
    //   render: text=> <span><Icon type="warning" style={{color:'#f22',marginRight:10}}/>{text}</span>
    // },{
    //   dataIndex: 'warnCon',
    //   align:'right',
    //   render: text=> <span>{text}</span>
    // }];


    return (
      
      <Card
        bodyStyle={{padding:'0'}}
        hoverable={true}
        style={{marginTop:0}}
      >
        <div className="icons-list" style={{background:'none'}}>
          {/* <Button style={{ marginLeft: 8 }} onClick={this.playVideo}>
            播放
          </Button>   */}
          <OnePaintIcon onClick={this.setOne}/>
          <FourPaintIcon onClick={this.setFour}/>
          <NinePaintIcon  onClick={this.setNine}/>
          <CameraPaintIcon  onClick={this.capPic}/>
        </div>
      </Card>
    );
  }
}
